<script setup>
import { ref } from 'vue';

const selectedRole = ref('');
const arr = [
  {
    icon:'../../static/image/teacher.png',
    title:'辅导员角色',
    value: 'teacher',
    to:'/pages/re/user1'
  },
  {
    icon:'../../static/image/college.png',
    title:'学院角色',
    value: 'college',
  },
  {
    icon:'../../static/image/school.png',
    title:'学校角色',
    value: 'school',
    to:'/pages/report/user'
  },
]
const toNext = (to) => {
  uni.navigateTo({
    url:to
  })
}
</script>

<template>
  <view class="main" >
    <radio-group  v-model="selectedRole" >
      <view class="select" v-for="(item,user) in arr" :key="user">
        <view>
          <image class="icon" :src ='item.icon'></image>
        </view>
        <view>
          <text class="title">{{item.title}}</text>
        </view>
        <radio :value="item.value" class="radio" @click="toNext(item.to)"/>
      </view>
    </radio-group>
  </view>
</template>

<style scoped>
.title{
  width: 75px;
  height: 21px;
  font-weight: 500;
  font-size: 15px;
  color: #222222;
  letter-spacing: 0;
  margin-left: 5px;
}
.icon{
  width: 28px;
  height: 28px;
  margin-left: 12px;
}
.main{
  width: 100%;
  height: 100%;
  background: #F3F5F9;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.select{
  margin-top: 20px;
  width: 351px;
  height: 80px;
  background: #FFFFFF;
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.radio{
  margin-left: auto;
  margin-right: 20px;
}
</style>